<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登入界面</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        /*更改默认值*/
        html,body
        {
            width: 100%;
            height: 100%;
        }
        /*添加背景图片*/
        .main{
            width: 100%;
            height: 100%;
            background: url("./img/1.jpg") 100% 100% no-repeat;
        }
        /*让输入框居中*/
        .loginFrame{
            width: 700px;
            height: 500px;
            background: rgba(0,0,0,0.3);
            position:fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            /*添加边框圆角*/
            border-radius: 10px;
            /*添加边距*/
            padding: 50px 0;
            box-sizing: border-box;
            /*添加阴影*/
            box-shadow: 0 0 5px rgba(0,0,0,0.4);
        }
        /*改变盒子下方的输入框位置*/
        .loginFrame > div{
            width: 350px;
            height: 50px;
            margin: 40px auto;
            /*改变字体的颜色*/
            color: white;
        }

        /*改变标题居中，并且改变颜色*/
        .loginFrame > p{
            text-align: center;
            color: white;
            font-size: 25px;
        }

        /*改变输入框文字*/
        .loginFrame > div > span{
            display: inline-block;
            cursor: pointer;
            font-size: 24px;
        }

        /*改变输入框样式*/
        .loginFrame >div input{
            width: 100%;
            height: 30px;
            /*透明色*/
            background: transparent;
            /*消除默认边框*/
            border: none;
            /*添加底部边框*/
            border-bottom: 1px solid white;
            /*清除蓝色点击框*/
            outline: none;
            /*改变文字颜色*/
            color: white;
        }
        /*改变点击登录按钮样式*/
        .loginFrame .enterBut{
            width: 200px;
            height: 50px;
            /*添加圆角*/
            border-radius: 50px;
            /*设置背景颜色 渐变*/
            background-image: linear-gradient( to right ,#c979d4,#fa719d);
            text-align: center;
            padding-top: 10px;
            box-sizing:border-box;
            font-size: 20px;
            cursor: pointer;
        }

        /*给登录按钮添加 鼠标放上效果*/
        .loginFrame .enterBut:hover{
            box-shadow: 0 0 10px rgba(0,0,0,0.5) inset;
        }

        /*给输入框提醒文字改变颜色*/
        input::-webkit-input-placeholder{
            color: #BDCADA;
        }
        svg{
            vertical-align: middle;
        }
        img,span{
            vertical-align: middle;
        }
        .kk{
            width: 20px;
            height: 20px;
            font-size: 20px;
        }
        a{
            color: #FFFFFF;
            text-decoration:none
        }
    </style>
</head>
<body>
<!--登入界面-->

<!--背景-->

<div class="main">
    <form action="">
        <div class="loginFrame">
            <!--标题-->
            <p class="loginTitle">
                <img th:src="@{img/logo-kjzy.jpg}" alt="" width="50px" height="50px">
                <span> 科院酒店管理系统</span>
            </p>
            <form action="">
                <!--用户名-->
                <div class="user">
                    <label >
                    <span>
                        <svg t="1624355793844" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="4534" width="20" height="20">
                            <path d="M611.82862221 517.43478518C691.07863703 480.78317036 746.42014814
                             400.80497778 746.42014814 307.84094815 746.42014814 180.65256296 642.89754074
                              77.00859258 515.58779258 77.00859258s-230.83235555 103.64397037-230.83235555
                               230.83235557c0 92.96402963 55.22014815 172.94222222 134.47016296 209.59383703-183.98625185
                                43.69066667-321.36912592 208.86565925-321.36912592 405.95911112h43.93339259c0-206.07431111
                                 167.72361482-373.67656297 373.79792592-373.67656297s373.67656297 167.60225185
                                  373.67656297 373.67656297h43.93339259c0-197.09345185-137.38287408-362.26844445-321.36912593-405.95911112zM328.68882963
                                   307.84094815c0-102.91579259 83.86180741-186.7776 186.89896295-186.7776s186.7776
                                    83.86180741 186.7776 186.7776-83.74044445 186.89896297-186.7776 186.89896296-186.89896297-83.86180741-186.89896295-186.89896296z"
                                  fill="#ffffff" p-id="4535"></path>
                            <path d="M230.87028148 784.55466666l41.74885926 13.95674075c0.36408889-1.21362963
                                   41.02068148-120.02797037 137.38287407-139.32468149l-8.73813333-43.08385184c-120.99887408 24.15122963-168.45179259
                                   162.62637037-170.3936 168.45179258z" fill="#ffffff" p-id="4536">

                        </path>
                        </svg>
                    </span>
                        <span>用户名</span>
                        <!--输入框-->
                        <input type="text" placeholder=" UserName">
                    </label>
                </div>
                <!--密码-->
                <div class="password">
                    <label >
                    <span>
                        <svg t="1624356087321" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="5559" width="20" height="20">
                            <path d="M512 570.496a58.496 58.496 0 0 0-38.976 102.08v53.888a38.976
                             38.976 0 1 0 77.952 0v-53.888a58.304 58.304 0 0 0 19.456-43.584A58.368
                              58.368 0 0 0 512 570.496z m272.896-175.424H745.92V297.6a233.856 233.856
                               0 0 0-467.712 0v97.408h-39.04c-53.824 0-97.408 43.648-97.408 97.408V862.72c0
                                53.824 43.648 97.408 97.408 97.408h545.728c53.76 0 97.344-43.648
                                 97.344-97.408V492.48c0-53.824-43.584-97.408-97.344-97.408zM512
                                  102.72A194.88 194.88 0 0 1 706.88 297.6v97.408H317.12V297.6A194.944 194.944
                                   0 0 1 512 102.72z m331.392 760.064c0 32.32-26.24 58.432-58.496
                                    58.432H239.168a58.496 58.496 0 0 1-58.496-58.432V492.48c0-32.256 26.176-58.496
                                     58.496-58.496h545.728c32.256 0 58.496 26.176 58.496 58.496v370.304z m0 0" p-id="5560" fill="#ffffff">

                            </path>
                        </svg>
                    </span>
                        <span>密码</span>
                        <!--输入框-->
                        <input type="password" placeholder=" PassWord">
                    </label>
                </div>
                <!--登录按钮-->
                <div class="enterBut">
                    <button type="submit">登录</button>
                </div>
                <div class="kk"><a th:href="@{toPhoneLogin}">忘记密码</a></div>
            </form>
        </div>
    </form>

</div>
</body>
</html>